<!--  -->
<template>
  <div class='cityConfigArea'>
      <div class="cityConfigArea_circleLine">
          <span class="cityConfigArea_alertMess">城市-环线</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="circleLineAdd">新增</Button>
          <div>
              <Table ref="TableHeight" class="table" max-height="300" :columns="columns2" :data="data2"></Table>
              <span v-for="item in circleLineList" :key="item.loopLineId"  class="cityConfigArea_circleLine_span">{{item.loopLineName}}</span>
          </div>
      </div>
      <div>
          <span class="cityConfigArea_alertMess">城市-地铁-地铁站</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click="checkMoudle = true">新增</Button>
          <!-- <Button class="cityConfigArea_alertMessButton" type="success" @click="batchImport">批量导入</Button> -->
      </div>
      <Table ref="TableHeight" class="table" :max-height="onresizeHeight" :columns="columns1" :data="data1"></Table>
      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
         <div class="totalCount">
             当前第 {{pageData.page}} 页， 
             当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第 {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}} 条，
             共 {{pageData.total}} 条
         </div>
        <Page :current="pageData.page" :total="pageData.total-0" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer />
      </div>
      <!--新增板块 -->
      <Modal v-model="checkMoudle" title="新增地铁站" footer-hide width="500px">
        <div>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                <FormItem label="线路" prop="metroName">
                     <Input type="text"  v-model="formValidate.metroName" placeholder="请输入线路" class="cityConfigArea_moudle_select"></Input>
                </FormItem>
                <FormItem label="地铁站" prop="loopLineList">
                    <div v-for="(item,index) in formValidate.loopLineList" :key="index" class="cityConfigArea_moudle_inputList">
                       <Input type="text"  v-model="item.loopLineName" placeholder="请输入模块名字" class="cityConfigArea_moudle_select"></Input>
                       <Icon v-if= "index == 0" size="24" class="cityConfigArea_moudle_icon" color="#4fe669" @click="formValidate.loopLineList.push({loopLineName:''})" type="md-add-circle"  />
                       <Icon v-else color="red" size="24" class="cityConfigArea_moudle_icon" type="md-close-circle" @click="formValidate.loopLineList.splice(index,1)" />
                    </div>
                </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button class="cityConfigArea_cancelButton" @click="checkMoudle = false">取消</Button>
                    <Button type="primary" @click="addAreaSubmit('formValidate')">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
       <!--编辑 -->
      <Modal :width="400" v-model="currentDateDetail" title="地铁站点编辑" :mask-closable='false' :footer-hide='true' @on-cancel="customSortModal = false">
       <div>
            <Form ref="currentDateForEdit" :model="currentDate" :rules="ruleValidateDetail" :label-width="120">
                <FormItem label="线路" prop="metroName">
                    <Input type="text"  v-model="currentDate.metroName" placeholder="请输入线路" class="circleLineModal_select"></Input>
                </FormItem>
                <FormItem label="地铁站" prop="stationName">
                    <Input type="text"  v-model="currentDate.stationName" placeholder="请输入地铁站" class="circleLineModal_select"></Input>
                </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button class="cityConfigArea_cancelButton" @click="currentDateDetail = false">取消</Button>
                    <Button type="primary" @click="editAreaSubmit('currentDateForEdit')">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
      <!-- 城市环线编辑 -->
      <Modal v-model="circleLineModal" width="400" title="城市-环线增加/编辑" :footer-hide='true'>
         <div>
            <Form ref="currentDate" :model="circleLineMess"  :label-width="120">
                <FormItem label="环线:" >
                    <div v-for="item in circleLineMess.loopLineList" :key='item.id'>
                       <Input type="text"  v-model="item.loopLineName" placeholder="请输入环线名字" class="circleLineModal_select"></Input>
                    </div>
                </FormItem>
                 <Button type="primary" v-if="circleLineMess.type !== 'edit'" @click="circleLineMess.loopLineList.push({loopLineName:''})">新增</Button>
                <FormItem class="cityList_moudle_footer circleLineModal_footer">
                    <Button class="cityConfigArea_cancelButton" @click="circleLineModal = false">取消</Button>
                    <Button type="primary" @click="circleLineSubmit(circleLineMess.type)">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
  <simple-importcity :modal-obj="importObj" :updateObj="updateObj" />
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import simpleImportcity from "@/components/simple_importcity";
import { getLoopAdd, getLoopPages, getLoopUpdate, getLoopDelete,
         getMettroAdd, getMettroDelete, getMettroList, getMettroUpdate
} from '@/api/cityConfig'
export default {
components: {draggable, simpleImportcity},
data() {
 const ruleValidateCodeList = (rule, data, callback) =>{
    let flag = false;
    data.forEach(item=>{
        item.loopLineName && (flag = true)
    })
   if(!flag)return callback("请输入至少一个地铁站的名称")
   callback()
 }
 return {
   pageData: {
     total: 0,
     page: 1,
     rows: 10,
     pageSizeOpts: [10,30,50]
    },
    formValidate:{
      metroName:"",
      loopLineList:[{loopLineName:''}]
    },
    ruleValidate:{
      metroName: [ { required: true, message: '请填写地铁线路', trigger: 'blur' }],
      loopLineList: [ {validator:ruleValidateCodeList,trigger: 'blur' }]
    },
    parentCodeList:[],
    uploadList:[],
    onresizeHeight: 0,
    city:'上海',
    checkMoudle:false,
    columns1: [
            {
              title: '序号',
              align: 'center',
               render: (h, params) => {
                return h('div',params.row._index+1) 
              },
            },
            {
              title: '城市',
              key: 'cityName',
              align: 'center'
            },
            {
              title: '线路',
              key: 'metroName',
              align: 'center',
            },
            {
              title: '地铁站',
              key: 'stationName',
              align: 'center',
            },
            {
              title: '操作',
              key: 'address',
              fixed: 'right',
              width: 160,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toEdit(params.row)
                      }
                    }
                  }, '编辑'),
                 h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toDelete(params.row)
                      }
                    }
                  }, '删除')
               ]);
              },
            }
    ],
    columns2: [
            {
              title: '序号',
              align: 'center',
               render: (h, params) => {
                return h('div',params.row._index+1) 
              },
            },
            {
              title: '城市',
              key: 'cityName',
              align: 'center',
            },
            {
              title: '环线',
              key: 'loopLineName',
              align: 'center',
            },
            {
              title: '操作',
              key: 'address',
              fixed: 'right',
              width: 160,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toEditLoop(params.row)
                      }
                    }
                  }, '编辑'),
                 h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toDeleteLoop(params.row)
                      }
                    }
                  }, '删除')
               ]);
              },
            }
    ],
    data2:[],
    data1: [],
    importObj:{
        modalShow: false,
        title: '城市-区域-板块'
    },
     updateObj: {
          grid_importfile: 'grid_importfile',
          appName: 'web_back',
          appVersion: '1.0',
          code: '',
          api: "",
    },
    code:"",
    currentDate:{},
    currentDateDetail:false,
    ruleValidateDetail:{
      metroName:[ { required: true, message: '请填写线路', trigger: 'blur' }],
      stationName:[ { required: true, message: '请填写地铁站', trigger: 'blur' }]
    },
    deleteModal:false,
    circleLineModal:false,
    circleLineList:[],
    circleLineMess:{
        loopLineList:[{loopLineName:''}]
    }
};
},
computed: {},
watch: {},
methods: {
  //增加地铁站批量
  addAreaSubmit(name){
    this.$refs[name].validate((valid) =>{
      if(valid){
         console.log(this.formValidate)
         let {loopLineList,metroName} = this.formValidate;
         console.log(loopLineList)
         let userMess = this.$tool.getStorage("userMess"),mess = JSON.parse(userMess),{appId,userId,workNo} = mess;
         loopLineList.map(item=>{
            item.appId = appId;
            item.cityCode = this.cityCode
            item.cityName = this.cityName,
            item.metroName = metroName,
            item.stationName = item.loopLineName
         });
         console.log(loopLineList)
         let params = {
           metroStationList:loopLineList,
         }
         console.log(params)
         getMettroAdd(params).then(res=>{
          this.$Message.success("地铁站点增加成功");
          this.$refs[name].resetFields();
          this.checkMoudle = false;
          this.getmetroList()
         })
         
      }
    })
  },
  //获取环线列表
  getLineList(){
    this.code = this.$route.query.code;
    let {page,row} = this.pageData,params = {page,row,cityCode:this.code};
    getLoopPages(params).then(res=>{
      res.list.map(item=>item.cityName = this.$route.query.title)
      console.log("获取环线列表",res);
      this.data2 = res.list;
    })
  },
  //获取地铁类表
  getmetroList(){
    let {page, rows} = this.pageData
    getMettroList({page, rows,cityCode:this.$route.query.code}).then(res=>{
      res.list.map(item=>item.cityName = this.$route.query.title)
      this.data1 = res.list;
      this.pageData.total = res.total;
      console.log("获取地铁列表", res)
    })
  },
  //批量导入
  batchImport(){
     // Object.assign(this.$data.importObj, this.$options.data().importObj)
      this.importObj.modalShow = true
      this.updateObj.code = this.code
  },
  //自定义排序
  selfSort(){

  },
   //点击编辑按钮
   toEdit(mess){
    console.log(mess);
     this.currentDate = JSON.parse(JSON.stringify(mess));
     this.currentDateDetail = true;
   },
   //编辑确定
   editAreaSubmit(name){
     this.$refs[name].validate((valid) =>{
         if(valid){
           let {metroId,metroName,metroStationId,stationName} = this.currentDate;
           console.log(metroId,metroName,metroStationId,stationName);
           let params = {
            cityCode:this.cityCode,
            metroId,
            metroName,
            metroStationId,
            stationName,
            
           }
           getMettroUpdate(params).then(res=>{
             this.$Message.success("修改成功");
             this.currentDateDetail = false;
             this.getmetroList();
           })
         }
     })
   },
   //删除地铁站
   toDelete(mess){
      this.$Modal.confirm({
        title:'删除',
        content:`你确认${mess.stationName}地铁站删除么?`,
        closable:true,
        onOk:()=>{
          getMettroDelete({metroStationId:mess.metroStationId}).then(res=>{
            console.log("删除成功");
            this.$Message.success("删除成功")
            this.getmetroList()
          })
        },
        onCancel:()=>{} 
      })
     
   },
   //删除环线
   toDeleteLoop(mess){
     this.$Modal.confirm({
        title:'删除',
        content:`你确认${mess.loopLineName}环线删除么？`,
        closable:true,
        onOk:()=>{
          getLoopDelete({loopLineId:mess.loopLineId}).then(res=>{
            console.log("删除成功");
            this.$Message.success("删除成功")
            this.getLineList()
          })
        },
        onCancel:()=>{} 
     })
   },
   //点击环线新增按钮
   circleLineAdd(){
     this.circleLineMess.loopLineList = [{loopLineName:''}];
     this.circleLineMess.type = 'add'
     this.circleLineModal = true;
   },
   //点击环线编辑按钮
   toEditLoop(mess){
     let newObj = this.$tool.deepClone(mess)
     this.circleLineMess.loopLineList = [newObj],
     this.circleLineMess.type = 'edit'
     this.circleLineModal = true;
       console.log(mess) 
   },
   //环线新增确认按钮
   circleLineSubmit(){
     let {loopLineList,type} = this.circleLineMess;
      let arr = loopLineList.filter(item=>item.loopLineName);
      if(arr.length<1)return this.$Message.error("请完善信息");
      let userMess = this.$tool.getStorage("userMess"),mess = JSON.parse(userMess),{appId,userId,workNo} = mess;
      if(type == 'edit'){
         console.log(arr[0])
         let {loopLineId,loopLineName} = arr[0];
         getLoopUpdate({loopLineId,loopLineName}).then(res=>{
            this.$Message.success("修改成功");
            this.getLineList();
            this.circleLineModal = false;
         })
      }else{
        arr.forEach(item=>{ item.cityCode = this.code;item.appId = appId})
        console.log(arr)
        getLoopAdd({loopLineList:  arr}).then(res=>{
         console.log("环线增加",res);
         this.$Message.success("添加成功");
          this.getLineList()
         this.circleLineMess.loopLineList = [{loopLineName:''}];
         this.circleLineModal = false;
        })
      }
     
   },
  // 分页 页码改变事件
  pageOnChangeFun(page) {
    console.log('分页 页码改变事件')
      this.pageData.page = page;
      this.getmetroList()
  },
  // 分页 每页条数改变事件
  pageOnPageSizeChangeFun(rows) {
    console.log('分页 每页条数改变事件')
    this.pageData.rows = rows;
     this.pageData.page = 1;
    this.getmetroList()
  },
 
},
beforeCreate(){ 
  let {code, title} = this.$route.query;
  this.cityCode = code;
  this.cityName = title
},
created() {
  this.getLineList();
  this.getmetroList()
},
mounted() {

},
}
</script>
<style lang='scss' scoped>
 .cityConfigArea{
   &_circleLine{
      // box-shadow: 0px 0px 6px 0px rgba(116,119,121,0.2);
      padding: 8px;
      margin: 20px 0;
      // background-color: #f8f8f9; 
      &_span{
        border: 1px solid #ccc;
        padding: 2px 12px;
        margin-right: 8px;
        border-radius: 4px;
        margin-bottom: 9px;
        display: inline-block;
      }
   }
   &_alertMess{
     font-size: 16px;
     font-weight: 700;
     float: left;
     margin-top: 6px;
     .red{
      color: red;
     }
   }
   &_alertMessButton{
       margin: 0 8px 25px 8px;
   }
   &_moudle_select{
     width: 306px;
     margin-right: 10px;
   }
   &_moudle_inputList{
       margin-bottom: 10px;
   }
   &_moudle_icon{
     vertical-align: text-top;  
   }
   
   .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
 }
 .cityList_moudle_footer {
     /deep/.ivu-form-item-content{
      text-align: right;
      margin-right: 42px; 
    }
  
}
 .customSortStyle{
    text-align: left;
    .customSortHead, .customSortBody{
        li{
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #EEEEEE;
          div{
      flex: 1;
      text-align: center;
            button{
      margin: 0px 6px;
            }
          }
      div:first-child{
        flex: 0.4;
          }
        }
      }
    .customSortHead li{ padding-bottom: 10px;}
    .customSortBody li{ padding: 10px 0; line-height: 31px;}
    .customSortBody{
      max-height: 400px;
      overflow-y: auto;
      }
    .customSortFoot{
      padding-top: 14px;
      text-align: center;
    }
  }  
  .cityConfigArea_cancelButton{
      margin-right: 6px;
  }
  .circleLineModal_select{
     width: 200px;
    margin-right: 10px; 
    margin-bottom: 10px;
  }
  .circleLineModal_footer{
      border-top: 1px solid #ccc;
      margin-top: 6px;
      padding-top: 8px;
  }
</style>